import React from "react";

// 步骤一：使用React.createContext()创建Context对象
const userContext = React.createContext({
  name: "默认名称",
  age: "默认年龄",
});

function Child() {
  // 步骤三，通过userContext.Consumer组件包裹需要数据的子组件内容，里面传值为一个函数
  return (
    <userContext.Consumer>
      {(value) => (
        <div>
          <h2>
            获取数据：{value.name} —— {value.age}
          </h2>
        </div>
      )}
    </userContext.Consumer>
  );
}

export default function ContextFCpn() {
  return (
    <div>
      ContextFCpn
      <userContext.Provider value={{ name: "fsy", age: 21 }}>
        <Child />
      </userContext.Provider>
      <Child />
    </div>
  );
}
